<template>
  <div class="statistics">
    <i-row style="height: 50px;">
      <i-col span="12">
        日期范围：
        <i-date-picker type="daterange" :options="options" :value="initRange" placeholder="请选择日期范围" style="width: 200px" @on-change="changeDatePicker"></i-date-picker>
      </i-col>
      <i-col span="12" class="total-sum-text">
        学生总数：{{totalSum.studentCount}}，课时总计：{{totalSum.attendanceCount}}
      </i-col>
    </i-row>
    <div v-for="si in summaryInfo" :key="summaryInfoKey(si.classInfo)">
      <i-row>
        <i-col span="24">
          <i-table border :columns="summaryColumns(si)" :data="[si]"></i-table>
        </i-col>
      </i-row>
    </div>
  </div>
</template>

<script>
import common from "@/common";
import StatisticsDetails from "@/components/statistics-details.vue";

export default {
  name: "statistics",
  components: {
    StatisticsDetails
  },
  data: function() {
    return {
      initRange: this.getLastMonthRange(),
      searchRange: this.toStringRange(this.getLastMonthRange()),
      options: {
        shortcuts: [
          {
            text: "最近一周",
            value: this.getLastWeekRange
          },
          {
            text: "最近一月",
            value: this.getLastMonthRange
          }
        ]
      },
      summaryInfo: []
    };
  },
  mounted() {
    this.search();
  },
  computed: {
    totalSum() {
      let studentCount = 0;
      let attendanceCount = 0;
      this.summaryInfo.forEach(item => {
        studentCount += item.classInfo.studentCount;
        item.attendanceCountList.forEach(attendance => {
          attendanceCount += attendance.count;
        });
      });

      return {
        studentCount: studentCount,
        attendanceCount: attendanceCount
      };
    }
  },
  methods: {
    changeDatePicker(range) {
      this.searchRange = [].concat(range);
      this.search();
    },
    search() {
      this.axios
        .get("/statistics/attendance-count", {
          params: {
            start: this.searchRange[0],
            end: this.searchRange[1]
          }
        })
        .then(response => {
          if (response.code === 0) {
            this.summaryInfo = response.data;
          } else {
            this.$Message.error("取得课时统计信息失败。" + response.message);
          }
        });
    },
    getLastWeekRange() {
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 7);
      return [start, end];
    },
    getLastMonthRange() {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 1);
      return [start, end];
    },
    toStringRange(range) {
      const stringRange = [];
      range.forEach(item => {
        stringRange.push(common.formatStandardDate(item, "-"));
      });
      return stringRange;
    },
    formatClassInfo(week, classNum) {
      return "周" + common.formatDay(week) + "班 #" + classNum;
    },
    summaryInfoKey(classInfo) {
      return "" + classInfo.week + classInfo.classNum;
    },
    summaryColumns(summaryInfo) {
      // 固定字段
      const columns = [
        {
          type: "expand",
          width: 60,
          render: (h, params) => {
            return h(StatisticsDetails, {
              props: {
                start: this.searchRange[0],
                end: this.searchRange[1],
                week: params.row.classInfo.week,
                classNum: params.row.classInfo.classNum
              }
            });
          }
        },
        {
          title: "班级",
          width: 100,
          render: (h, params) => {
            const classInfo = params.row.classInfo;
            return h(
              "span",
              this.formatClassInfo(classInfo.week, classInfo.classNum)
            );
          }
        },
        {
          title: "人数",
          width: 80,
          render: (h, params) => {
            const classInfo = params.row.classInfo;
            return h("span", classInfo.studentCount);
          }
        },
        {
          title: "合计",
          width: 120,
          render: (h, params) => {
            let sum = 0;
            params.row.attendanceCountList.forEach(item => {
              sum += item.count;
            });
            return h("span", sum);
          }
        }
      ];

      // 计算日期活动字段
      const week = summaryInfo.classInfo.week;
      const start = new Date(this.searchRange[0]);
      const end = new Date(this.searchRange[1]);
      const dateColumns = common.pickWeekInRange(start, end, week);

      dateColumns.forEach(item => {
        columns.push({
          title: common.formatTitle(item),
          width: 120,
          render: (h, params) => {
            let count = 0;
            params.row.attendanceCountList.forEach(attendance => {
              if (common.isSameDay(new Date(attendance.courseDate), item)) {
                count = attendance.count;
              }
            });
            return h("span", count);
          }
        });
      });

      // 追加空字段
      columns.push({
        title: " ",
        render: h => {
          return h("span", "");
        }
      });

      return columns;
    }
  }
};
</script>

<style lang="less" scoped>
.total-sum-text {
  line-height: 32px;
}
</style>
